<template>
  <div class="container">

    <!-- 添加用户按钮和搜索框 -->
    <div class="search-container">
      <el-button type="primary" class="add-user-button" @click="showAddDialog">添加员工</el-button>
      <el-input v-model="searchKeyword" placeholder="搜索员工" clearable @keyup.enter.native="searchUsers" class="search-input"></el-input>
    </div>

    <!-- 使用 Element UI 的表格组件 -->
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="eid" label="员工编号"></el-table-column>
      <el-table-column prop="ename" label="员工名字"></el-table-column>
      <el-table-column prop="ephone" label="电话"></el-table-column>
      <el-table-column prop="esex" label="性别">
        <template slot-scope="scope">{{ scope.row.esex === 1 ? '男' : '女' }}</template>
      </el-table-column>
      <el-table-column prop="eage" label="年龄"></el-table-column>
      <el-table-column prop="pid" label="项目类型">
        <template slot-scope="scope">
          {{ scope.row.pid === 1 ? '美容項目' : '美发项目' }}
        </template>
      </el-table-column>
      <el-table-column prop="tid" label="技术类型">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ projectList.find(item => item.tid === scope.row.tid).tname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lid" label="员工等级">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{employeeLevel.find(item => item.value === scope.row.lid).label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="促销价格"></el-table-column>
      <el-table-column prop="originMoney" label="原始价格"></el-table-column>
      <el-table-column label="照片">
        <template slot-scope="scope">
          <img :src="'http://localhost:9990/' + scope.row.photos" width="100" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="dodelete(scope.row.eid)">删除</el-button>
          <el-button type="text" size="small" @click="showUpdateDialog(scope.row.eid)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加员工" :visible.sync="addDialogVisible" width="50%" :before-close="closeDialog">
      <el-form ref="addForm" :model="emp" label-width="100px" class="form-container">
        <el-form-item label="员工编号">
          <el-input v-model="emp.eid" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="员工名称">
          <el-input v-model="emp.ename" placeholder="请输入员工名"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="emp.ephone" placeholder="请输入真实电话"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="emp.esex" placeholder="请选择用户性别">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户年龄">
          <el-input v-model="emp.eage" placeholder="请输入用户年龄"></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select v-model="emp.pid" placeholder="请选择项目类型">
            <el-option
              v-for="item in pidOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技术类型">
          <el-select v-model="emp.tid" placeholder="请选择技术类型">
            <el-option
              v-for="item in projectList"
              :key="item.tid"
              :label="item.tname"
              :value="item.tid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工等级">
          <el-select v-model="emp.lid" placeholder="请选择用户性别">
            <el-option
              v-for="item in employeeLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="促销价格">
          <el-input v-model="emp.money" placeholder="请输入促销价格"></el-input>
        </el-form-item>
        <el-form-item label="原始价格">
          <el-input v-model="emp.originMoney" placeholder="请输入原始价格"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="upload-demo"
            action="http://localhost:9990/upload"
            :file-list="fileList"
            :on-success="dosuccess"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dosave">确 定</el-button>
            </span>
    </el-dialog>

    <!-- 修改用户对话框 -->
    <el-dialog title="修改员工" :visible.sync="updateDialogVisible" width="50%" :before-close="closeDialog">
      <el-form ref="updateForm" :model="emp" label-width="100px" class="form-container">
        <el-form-item label="员工编号">
          <el-input v-model="emp.eid" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="员工名称">
          <el-input v-model="emp.ename" placeholder="请输入员工名"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="emp.ephone" placeholder="请输入真实电话"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="emp.esex" placeholder="请选择用户性别">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户年龄">
          <el-input v-model="emp.eage" placeholder="请输入用户年龄"></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select v-model="emp.pid" placeholder="请选择项目类型">
            <el-option
              v-for="item in pidOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技术类型">
          <el-select v-model="emp.tid" placeholder="请选择技术类型">
            <el-option
              v-for="item in projectList"
              :key="item.tid"
              :label="item.tname"
              :value="item.tid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工等级">
          <el-select v-model="emp.lid" placeholder="请选择用户性别">
            <el-option
              v-for="item in employeeLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="促销价格">
          <el-input v-model="emp.money" placeholder="请输入促销价格"></el-input>
        </el-form-item>
        <el-form-item label="原始价格">
          <el-input v-model="emp.originMoney" placeholder="请输入原始价格"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="upload-demo"
            action="http://localhost:9990/upload"
            :file-list="fileList"
            :on-success="dosuccess"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="updateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doupdate">确 定</el-button>
            </span>
    </el-dialog>

    <!-- 使用 Element UI 的分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pagebean.total"
      :page-size="pagebean.pagesize"
      :current-page="pagebean.pagenow"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';

const employeeLevel = [
  { value: 1, label: '高级'},
  { value: 2, label: '中级'},
  { value: 3, label: '初级'}
]

const pidOptions = [
  {
    value: 1,
    label: '美容項目'
  },
  {
    value: 0,
    label: '美发項目'
  }
]

const sexOptions = [
  {
    value: 1,
    label: '男'
  },
  {
    value: 0,
    label: '女'
  }
]

const roleOptions = [
  {
    value: 1,
    label: '会员用户'
  },
  {
    value: 0,
    label: '普通用户'
  }
]

export default {
  data() {
    return {
      emp: {},
      addDialogVisible: false, // 控制添加用户对话框的显示与隐藏
      updateDialogVisible: false, // 控制修改用户对话框的显示与隐藏
      pagebean: {
        total: 0,
        pagesize: 2,
        pagenow: 1,
        data: []
      },
      searchKeyword: '', // 存储搜索关键词
      filteredData: [], // 存储过滤后的数据
      fileList: [], // 存储上传文件列表
      projectList: [],
      employeeLevel: employeeLevel,
      sexOptions: sexOptions,
      roleOptions: roleOptions,
      pidOptions: pidOptions
    };
  },
  created() {
    this.doload();
    this.searchTechnology();
  },
  methods: {
    handleCurrentChange(val) {
      this.pagebean.pagenow = val;
      this.doload();
    },
    doload() {
      const that = this;
      this.$axios.get(`http://localhost:9990/emp/${this.pagebean.pagenow}/${this.pagebean.pagesize}`)
        .then(response => {
          that.pagebean = response.data;
          that.filteredData = response.data.data; // 初始化过滤后的数据
        });
    },
    dodelete(eid) {
      const that = this;
      this.$axios.delete(`http://localhost:9990/emp/${eid}`)
        .then(() => {
          that.doload();
        });
    },
    dosave() {
      const that = this;
      alert(this.emp);
      this.$axios.post('http://localhost:9990/emp', qs.stringify(this.emp))
        .then(() => {
          that.doload();
          that.emp = {};
          that.addDialogVisible = false; // 关闭对话框
        });
    },
    dopreupdate(eid) {
      const that = this;
      this.$axios.get(`http://localhost:9990/emp/${eid}`)
        .then(response => {
          that.emp = response.data;
        });
    },
    doupdate() {
      const that = this;
      this.$axios.put('http://localhost:9990/emp', qs.stringify(this.emp))
        .then(() => {
          that.doload();
          that.emp = {};
          that.updateDialogVisible = false; // 关闭对话框
        });
    },
    showAddDialog() {
      this.emp = {}; // 清空表单
      this.fileList = []; // 清空文件列表
      this.addDialogVisible = true; // 显示对话框
    },
    showUpdateDialog(eid) {
      this.dopreupdate(eid);
      this.updateDialogVisible = true; // 显示修改对话框
    },
    searchUsers() {
      // 过滤数据
      this.filteredData = this.pagebean.data.filter(emp => {
        return (
          emp.ename.includes(this.searchKeyword) ||
          emp.esex.includes(this.searchKeyword) ||
          emp.eage.includes(this.searchKeyword) ||
          emp.ephone.includes(this.searchKeyword) ||
          emp.pid.includes(this.searchKeyword) ||
          emp.tid.includes(this.searchKeyword) ||
          emp.lid.includes(this.searchKeyword) ||
          emp.photos.includes(this.searchKeyword)
        );
      });
    },
    dosuccess(response, file, fileList) {
      // 上传成功后，获取图片路径
      this.emp.photos = file.name; // 假设后端返回的数据中包含图片路径
    },
    searchTechnology() {
      const that = this;
      this.$axios.get(`http://localhost:9990/technology-list`)
        .then(response => {
          that.projectList = response.data;
        });
    }
  }
};
</script>

<style scoped>
/* 添加用户按钮 */
.add-user-button {
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
  display: inline-flex; /* 改为 inline-flex */
  align-items: center; /* 居中对齐文本 */
  margin-right: 10px; /* 右侧间距 */
  margin-bottom: 20px;
}

/* 搜索框 */
.search-input {
  display: inline-block;
  width: 1030px; /* 调整宽度 */
  margin-bottom: 20px;
}

/* 搜索容器 */
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 表格样式 */
.el-table {
  margin-top: 20px;
}

/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  text-align: center;
}

/* 上传文件样式 */
.upload-demo {
  margin-top: 10px;
}

/* 对话框样式 */
.dialog-footer {
  text-align: right;
}

/* 表单容器 */
.form-container {
  margin-top: 20px;
}
</style>
